$(document).ready(function () {

    //客源地数据
    var cityData1 = ['山西', '河南','陕西','河北','江苏']
    var cityData1Reverse = ['江苏', '河北','陕西','河南','山西']
    var cityData2 = ['四川','安徽','山东','北京','湖北']
    var cityData2Reverse = ['湖北','北京','山东','安徽','四川']
    var datas11 = [1213, 2316, 4026, 8623, 12316];
    var datas21 = [656,668 ,762 , 816, 1123];
    $('.place-box ul li').click(function () {
        let _index = $(this).index()
        $(this).addClass('active').siblings().removeClass('active')
        if (_index === 1){
            cityData1 = ['开封', '周口','南阳','漯河','襄阳']
            cityData1Reverse = ['襄阳', '漯河','南阳','周口','开封']
            cityData2 =  ['信阳','郑州', '新乡','洛阳', '焦作',  ]
            cityData2Reverse = [ '焦作','洛阳', '新乡', '郑州', '信阳']
            datas11 = [1426, 1689, 5652, 6219, 9216];
            datas21 = [606, 653, 871, 1103, 1168];
            myChart6()
        }else {
            cityData1 = [ '河南','山西','陕西','云南','贵州']
            cityData1Reverse = ['贵州', '云南','陕西','河南','山西']
            cityData2 = ['四川','海南','广东','湖南','湖北']
            cityData2Reverse = ['湖北','湖南','广东','海南','四川']
            datas11 =  [1213, 2316, 4026, 8623, 12316];
            datas21 =  [656,668 ,762 , 816, 1123];
            myChart6()
        }
    })

    // 近7天
    var preSevenData=[160, 145, 198, 240, 120, 101, 120]
    var preSevenDay=['12-24','12-25','12-26','12-27','12-28','12-29','12-30',]

    // 近七天客流量
    function myChart1() {
        var myChart = echarts.init(document.getElementById('index_3'));

        option = {
            grid: {
                top: '20px',
                left: '20px',
                bottom: "35px",
                right: "16px"
            },
            legend: {
                show:true,
                right:'20',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
            },
            tooltip: {
                show: true,
                trigger:'axis'
            },
            xAxis: {
                type: 'category',
                data: preSevenDay,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(46,166,255,.5)"
                    }
                }
            },
            yAxis: {
                type: 'value',
                // max: 100000,
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },
            series: [
                {
                    data: preSevenData,
                    type: 'line',
                    smooth: true,
                    symbol: "circle",
                    name: '客流量(人次)',
                    symbolSize: 2, // 控制线条上 点 的大小
                    lineStyle: {
                        color: '#fe5959'
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(244,86,84,.6)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(244,86,84,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(244,86,84,.6)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                }
            ]
        };

        myChart.setOption(option);
    }


    //男女
    function myChart2() {
        var myChart = echarts.init(document.getElementById('portrait_2'));
        var symbols = [
            'path://M115.3,45.3H104c5.7-1.9,9.8-7.2,9.8-13.5c0-7.8-6.4-14.2-14.2-14.2c-7.8,0-14.2,6.4-14.2,14.2c0,6.3,4.1,11.6,9.8,13.5  H83.8c-10,0-18.3,8.1-18.3,18.2v44c0,3.4,2.7,6.2,6.1,6.2c3.4,0,6.2-2.8,6.2-6.2V67.9H81v110.5c0,4.6,3.8,8.3,8.4,8.3  c4.6,0,8.3-3.7,8.3-8.3v-64.1h3.4v64.1c0,4.6,3.7,8.3,8.3,8.3c4.6,0,8.4-3.7,8.4-8.3V67.9h3.2v39.7c0,3.4,2.8,6.2,6.2,6.2  s6.1-2.8,6.1-6.2v-44C133.6,53.5,125.4,45.3,115.3,45.3z',
            'path://M135.6,99.4l-11.4-39.7c-4.6-15.9-17.8-15.4-17.8-15.4h-5.2c5.1-2.2,8.6-7.3,8.6-13.1c0-8-6.5-14.4-14.5-14.4  c-8,0-14.5,6.4-14.5,14.4c0,5.9,3.5,10.9,8.6,13.1h-5.1c0,0-13.3-0.5-17.8,15.4L55,99.4c-1.1,3.7,1,6.5,4.2,7.5  c3.2,0.9,6.5-0.7,7.4-3.7l11.1-38.7h3l-19.2,67h18.1v49.1c0,3.7,3.2,6.9,7.1,6.9c3.5,0,7.1-3.5,7.1-7.2v-48.8h2.9v48.8  c0,3.7,3.6,7.2,7.1,7.2c3.9,0,7.1-3.1,7.1-6.9v-49.1H129l-19.2-67h3l11.1,38.7c0.8,3,4.2,4.6,7.4,3.7  C134.6,105.9,136.6,103.1,135.6,99.4z',
        ];

        var bodyMax = 315;
        option = {

            grid: {
                left: '10%',
                right: '10%',
                top: '30%',
                bottom: "20%"
            },
            xAxis: {
                show: false,
                data: ['男', '女',],
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {show: false}
            },
            yAxis: {
                show: false,
            },

            markLine: {
                z: -100
            },

            tooltip: {
                show: true
            },
            series: [
                {
                    name: '人数',
                    type: 'pictorialBar',
                    symbolClip: true,
                    symbolBoundingData: bodyMax,
                    data: [{
                        value: 218,
                        symbol: symbols[0]
                    }, {
                        value: 82,
                        symbol: symbols[1]
                    },],
                    itemStyle: {
                        // color: '#fff'
                        color: (params) => {
                            let colors = ['#2ea6ff', '#ff5959',]
                            return colors[params.dataIndex]
                        }
                    },
                    z: 10,
                    symbolOffset: ["30%", 0],//柱子的位置
                    symbolSize: [30, 77],//size,单个symbol的大小
                    label:{
                        show:true,
                        position:'bottom',
                        formatter: function (data) {
                            let num = (data.value*100/315)
                            return data.name +'占比：'+num.toFixed(2) + "%"
                        }
                    }
                },
                {
                    name: '总数',
                    type: 'pictorialBar',
                    symbolBoundingData: bodyMax,
                    tooltip: {
                        show: false
                    },
                    // animationDuration: 0,
                    itemStyle: {
                        // color: '#fff'
                        color: (params) => {
                            let colors = ['rgba(46,166,255,.4)', 'rgba(255,89,89,.4)',]
                            return colors[params.dataIndex]
                        }
                    },
                    data: [{
                        value: bodyMax,
                        symbol: symbols[0]
                    }, {
                        value: bodyMax,
                        symbol: symbols[1]
                    }],
                    symbolOffset: ["30%", 0],//柱子的位置
                    symbolSize: [30, 77],//size,单个symbol的大小
                }
            ]
        };

        myChart.setOption(option);
    }

    //年龄
    function myChart3() {
        var myChart = echarts.init(document.getElementById('portrait_3'));
        let color=['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']
        let data = [
            {value: 0, name: '18岁以下'},
            {value: 11.72, name: '18-24岁'},
            {value: 38.92, name: '25-39岁'},
            {value: 32.8, name: '40-59岁'},
            {value: 19.57, name: '60岁以上'}
        ]
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            color:color,
            // visualMap: {
            //     show: false,
            //     min: 80,
            //     max: 600,
            //     inRange: {
            //         colorLightness: [0, 1]
            //     }
            // },
            legend: {
                // show:false,
                right:'3%',
                top:'12%',
                orient:'vertical',
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['35%', '50%'],
                    data,
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 1)'
                    },
                    labelLine: {
                        lineStyle: {
                            // color: '#fff'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 10
                    },


                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };

        myChart.setOption(option);
    }
    // 停留时长
    function myChart4() {
        var myChart = echarts.init(document.getElementById('portrait_4'));
        var visits = [8.65,9.186,10.63,13.19,34.687]; //数值
        var grade = ['72小时以上','48-72小时','24-48小时','12-24小时','12小时以下'];
        var data = {
            grade: grade,
            // totalCost: totalCost,
            visits: visits,
        };
        option = {
            grid: {
                top:'8%',
                left:'-10%',
                right: '5%',
                bottom: '-5%',
                containLabel: true

            },
            tooltip: {
                show: false
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    margin:70,
                    textStyle: {
                        align:'left',
                        fontSize: 12,
                        color: '#fff'
                    },
                },
                data: data.grade
            }, {
                show:false,
                type: 'category',

                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: data.visits
            }, ],
            series: [
                {

                    type: 'bar',

                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(55,184,102,0.3)'

                            }, {
                                offset: 1,
                                color: 'rgba(55,184,102,1)'

                            }]),
                            barBorderRadius: 0,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                    label: {
                        normal: {
                            position: 'right',
                            color:'#fff',
                            show:true,
                            formatter:function(params){
                                return params.value+'%'
                            }
                        }
                    },
                    barWidth: '30%',

                    data: data.visits
                }

            ]
        };

        myChart.setOption(option);
    }
    // 出行方式
    function myChart5() {
        var myChart = echarts.init(document.getElementById('portrait_5'));
        let color=['#4B66C7','#9A4CFB','#44D798','#E76D59','#53FCB3','#00E4FF']
        let data = [
            {value: 26, name: '组团'},
            {value: 68.15, name: '自驾'},
            {value: 8.8, name: '普通火车'},
            {value: 5.05, name: '其他'}
        ]
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} %"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data:['组团','自驾','普通火车','其他'],
                textStyle: {
                    color: '#fff',
                },
            },
            color:color,
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length2:30
                        }
                    },
                    label: {
                        normal: {
                            formatter: function (params) {

                                return '{white|' + params.value + '%}'
                            },
                            rich: {
                                white: {
                                    color: '#fff',
                                    lineHeight: 20,
                                    textAlign: 'left',
                                    fontSize: '12px',
                                    fontFamily: 'PingFangSC'
                                }
                            }

                        }
                    },
                    data:data
                }
            ]
        };


        myChart.setOption(option);
    }
    //客源
    function myChart6() {
        var myChart = echarts.init(document.getElementById('portrait_6'));
        var weatherIcons = {
            first: "../../assets/images/top-1.png",
            second: "../../assets/images/top-2.png",
            third: "../../assets/images/top-3.png",
            other: "../../assets/images/top-0.png"
        };
        var myColor = ['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']

        function getsum(arr) {
            return arr.reduce(function (prev, curr, idx, arr) {
                return prev + curr;
            });
        }

        var sumarr = datas11.concat(datas21);
        var sum = getsum(sumarr);
        // console.log(sum);
        option = {
            grid: [
                {
                    width: "28%",
                    left: '13%',
                    top: '5%',
                    right: '0',
                    bottom: '5%'
                },
                {
                    width: "28%",
                    left: '70%',
                    top: '5%',
                    right: '0',
                    bottom: '5%'
                }
            ],
            xAxis: [
                {
                    gridIndex: 0,
                    show: false,
                }, {
                    gridIndex: 1,
                    show: false,
                }
            ],
            yAxis: [
                {
                    gridIndex: 0,
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: 'none',
                    axisLabel: {
                        align: 'left',
                        padding: [0, 0, 0, -50],
                        textStyle: {
                            color: '#fff',
                            fontSize: '12px',
                            rich: {
                                a: {
                                    fontSize: 10,
                                    backgroundColor: {
                                        image: weatherIcons.first
                                    },
                                    align: 'center',
                                    color: '#fff',
                                    width: 17,
                                    height: 21,
                                },
                                b: {
                                    fontSize: 10,
                                    backgroundColor: {
                                        image: weatherIcons.second
                                    },
                                    align: 'center',
                                    color: '#fff',
                                    width: 17,
                                    height: 21
                                },
                                c: {
                                    fontSize: 10,
                                    backgroundColor: {
                                        image: weatherIcons.third
                                    },
                                    align: 'center',
                                    color: '#fff',
                                    width: 17,
                                    height: 24
                                },
                                d: {
                                    fontSize: 10,

                                    align: 'center',
                                    color: '#fff',
                                    width: 17,
                                    height: 24
                                }
                            }
                        },
                        formatter: function (params) {

                            var data = cityData1;
                            for (var i = 0; i < 5; i++) {
                                if (data[i] == params) {
                                    var j = i + 1
                                    if (i == 0) {
                                        return '{a|' + j + '} ' + params
                                    }
                                    if (i == 1) {
                                        return '{b|' + j + '} ' + params

                                    }
                                    if (i == 2) {
                                        return '{c|' + j + '} ' + params
                                    }
                                    if (i > 2) {
                                        return '{d| ' + j + '}' + params
                                    }
                                }

                            }
                        },
                    },

                    data: cityData1Reverse
                },
                {
                    gridIndex: 0,
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: 'none',
                    data: []
                },
                {
                    gridIndex: 1,
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: 'none',
                    axisLabel: {
                        align: 'left',
                        padding: [0, 0, 0, -50],
                        textStyle: {
                            color: '#fff',
                            fontSize: '12px',
                            rich: {
                                a: {
                                    fontSize: 10,
                                    width: 15,
                                    textAlign: 'center',
                                    color: '#14C6CA',

                                }
                            },
                        },

                        formatter: function (params) {
                            //
                            //
                            //
                            //
                            //
                            var data = cityData2;
                            for (var i = 0; i < 5; i++) {
                                if (data[i] == params) {
                                    var k = i + 6
                                    return '{a|' + k + '} ' + params
                                }
                            }
                        },
                    },
                    data: cityData2Reverse
                }, {
                    gridIndex: 1,
                    splitLine: 'none',
                    axisTick: 'none',
                    axisLine: 'none',
                    data: []
                }
            ],
            series: [
                {
                    name: '值',
                    type: 'bar',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: datas11,
                    label: {
                        normal: {
                            show: true,
                            position: ['80%', '-12px'],
                            color: '#53fcb3',
                            fontSize: '10px',
                            // formatter: function (item) {
                            //     return item.value + '万' + '\xa0\xa0 ' + (item.value / sum * 100).toFixed(2) + '%'
                            // }
                        }
                    },
                    barWidth: '7px',
                    itemStyle: {
                        normal: {
                            //每根柱子颜色设置
                            color: function (params) {
                                var _this = this;
                                var index = params.dataIndex;
                                return myColor[index]
                            },
                            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            //     offset: 0,
                            //     color: '#0090F8'
                            // }, {
                            //     offset: 1,
                            //     color: '#00C9FF'
                            // }]),
                            // color:myColor[index],
                            barBorderRadius: 50,
                        }
                    },
                    z: 2
                },
                {
                    type: "bar",
                    barWidth: 7,
                    xAxisIndex: 0,
                    barGap: "-100%",
                    data: [16000, 16000,16000, 16000,16000],
                    itemStyle: {
                        normal: {
                            color: "#444a58",
                            barBorderRadius: 14
                        }
                    },
                    zlevel: -1
                },
                {
                    name: '值',
                    type: 'bar',

                    xAxisIndex: 1,
                    yAxisIndex: 3,
                    data: datas21,
                    label: {
                        normal: {
                            show: true,
                            position: ['80%', '-12px'],
                            color: '#53fcb3',
                            fontSize: '10px',
                            // formatter: function (item) {
                            //     return item.value + '万' + '\xa0\xa0' + (item.value / sum * 100).toFixed(2) + '%'
                            // }
                        }
                    },
                    barWidth: '7px',
                    itemStyle: {
                        normal: {
                            color: "#53fcb3",
                            barBorderRadius: 50,
                        }
                    },
                    z: 2
                },
                {
                    type: "bar",
                    barWidth: 7,
                    xAxisIndex: 1,
                    yAxisIndex: 3,
                    barGap: "-100%",
                    data: [16000, 16000,16000, 16000,16000],
                    itemStyle: {
                        normal: {
                            color: "#444a58",
                            barBorderRadius: 14
                        }
                    },
                    zlevel: -1,
                    z: 2
                },

            ]
        };
        myChart.setOption(option);

        myChart.setOption(option);
    }
    myChart1()
    // setTimeout(myChart1,1000);
    setTimeout(myChart2,1000)
    setTimeout(myChart3,2000)
    setTimeout(myChart4,2000)
    setTimeout(myChart5,3000)
    setTimeout(myChart6,3000)
});
